<template>
  <div class="top-board-overview">
    <!-- 设备状态 -->
    <div class="top-board-overview-item one">
      <deviceStatusCom ref="deviceStatisticsRef" :dark="dark" :arrow="arrow" :class-code="classCode" />
    </div>
    <!-- 今日任务 -->
    <div class="top-board-overview-item two">
      <deviceStatisticsTasks ref="deviceStatisticsTasksRef" :dark="dark" :arrow="arrow" :height="height" :class-code="classCode" />
    </div>
    <!-- 今日报警 -->
    <div class="top-board-overview-item three">
      <alarmStatusCom ref="alarmStatRef" :dark="dark" :arrow="arrow" :class-code="classCode" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import deviceStatisticsTasks from "./components/deviceStatisticsTasks.vue";
import deviceStatusCom from "./components/deviceStatusCom.vue";
import alarmStatusCom from "./components/alarmStatusCom.vue";
interface Props {
  classCode: string;
  height?: number;
  dark?: boolean;
  arrow?: boolean;
}
const props = withDefaults(defineProps<Props>(), { height: 234, dark: false, arrow: false });
// 设备状态
const deviceStatisticsRef = ref<InstanceType<typeof deviceStatusCom> | null>(null);
const deviceStatisticsTasksRef = ref<InstanceType<typeof deviceStatisticsTasks> | null>(null);
const alarmStatRef = ref<InstanceType<typeof alarmStatusCom> | null>(null);

/**
 * 定时用更新数据
 */
const initAll = async () => {
  deviceStatisticsTasksRef.value.init();
  deviceStatisticsRef.value.initAll();
  alarmStatRef.value.initAll();
};
defineExpose({
  initAll
});
</script>
<style lang="scss" scoped>
.top-board-overview {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(24, minmax(16px, 1fr));
  grid-auto-rows: 100%;
  grid-auto-flow: column dense;
  grid-gap: 16px;
  width: 100%;
  height: 100%;

  .top-board-overview-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .one {
    grid-column: 1 / 5;
  }

  .two {
    grid-column: 5 / 21;
  }

  .three {
    grid-column: 21 / 25;
  }
}
</style>
